<template>
	<div>
		<div class="header">
			<div class="header-left" @click='back'><img src="../../../static/lfl/back.png" /></div>
			<div class="header-mid">省市区选择</div>
			<div class="header-right" @click='back'>完成</div>
		</div>
		<div class="main">
			<div class="left">
				<div class="area">
					重庆
				</div>
			</div>
			<div class="right">
				<ul class="box">
				<li>
					<div class="box-r" >
						沙坪坝区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						渝北区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						渝中区
						
					</div>
				</li>
				<li>
					
					<div class="box-r">
						南岸区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						巴南区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						大渡口区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						北碚区
					</div>
				</li><li>
					
					<div class="box-r">
						江北区
					</div>
				</li>
				<li>
					
					<div class="box-r">
						开州
					</div>
				</li>
				<li>
					
					<div class="box-r">
						綦江
					</div>
				</li>
				<li>
					
					<div class="box-r">
						云阳
					</div>
				</li>
				<li>
					
					<div class="box-r" >
						城口县
					</div>
				</li>
			</ul>
			</div>
			
		</div>
	</div>
	
	
</template>
<script>
	export default {
		name: 'addr',
		data() {
			return {
				inpu:'重庆'
			}
		},
		methods: {
			back() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	*{
		margin: 0;
		padding: 0;
	}
	#app{
		background: gray;
	}
	.header {
		width: 7.5rem;
		height: 1rem;
		background: white;
	}
	.header-left img{
		width: 0.25rem;
		height: 0.45rem;
	}
	.header-left{
		width: 0.3rem;
		float: left;
		margin-left: 0.4rem;
   	 margin-top: 0.3rem;
	}
	.header-mid{
		width: 3rem;
		height: 1rem;
		margin-left: 1.6rem;
		line-height: 1rem;
		text-align: center;
		float: left;
	}
	.area{
		width: 100%;
		background: white;
		height: 0.8rem;
		line-height:0.8rem;
		border: 1px solid gainsboro;
		box-sizing: border-box;
		text-align: center;
		border-radius: 0.4rem;
		font-size: 14px;
	}
	.header-right{
		float: right;
		margin-right: 0.4rem;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		color: dodgerblue;
	}
	.main{
		width: 7.5rem;
		overflow-x: hidden;
	}
	.left{
		width:3rem;
		float: left;
		background: gainsboro;
		height: 11rem;
		border-radius: 0.4rem;
	}
	.right{
		width: 3rem;
		float: left;
	}
	.box{
		text-align: center;
		line-height: 0.8rem;
		list-style: none;
	}
	.box li{
		text-align: center;
		height: 0.8rem;
		margin-bottom: 0.05rem;
		border-bottom: 1px dashed gainsboro;
		font-size: 13px;
	}
	
	.box li:hover{
		background: lightskyblue;
	}
	.box-r{
		text-align: center;
	}
</style>